<template>
  <div class="main">
    <el-row :gutter="10" class="row">
      <el-col :lg="6">
        <el-card class="card box-card">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>
          <el-tree
            class="filter-tree"
            :data="treeData"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick"
            icon-class=" "
            node-key="id"
            :current-node-key="1"
            :expand-on-click-node="false"
          >
            <template #default="{ data, node }">
              <template v-if="node.level === 1">
                <div class="custom-node">
                  <i class="el-icon-goods"></i>
                  <span class="custom-node-text">{{ data.label }}</span>
                </div>
              </template>
              <template v-else-if="node.level === 2">
                <div class="custom-node">
                  <i class="el-icon-help"></i>
                  <span class="custom-node-text">{{ data.label }}</span>
                </div>
              </template>
              <template v-else-if="node.level === 3">
                <div class="custom-node">
                  <i class="el-icon-camera"></i>
                  <span class="custom-node-text">{{ data.label }}</span>
                </div>
              </template>
              <template v-else-if="node.level === 4">
                <div class="custom-node">
                  <i class="el-icon-c-scale-to-original"></i>
                  <span class="custom-node-text">{{ data.label }}</span>
                </div>
              </template>
              <template v-else-if="node.level === 5">
                <div class="custom-node">
                  <i class="el-icon-document"></i>
                  <span class="custom-node-text">{{ data.label }}</span>
                </div>
              </template>
            </template>
          </el-tree>
        </el-card>
      </el-col>
      <el-col :lg="18">
        <el-card class="card content-card-top">
          <div id="chart"></div>
        </el-card>
        <el-card class="card content-card-bottom">
          <div class="card-title">
            <div class="card-title-left">数据报表</div>
            <div class="card-title-right">
              <el-button size="medium">导出</el-button>
            </div>
          </div>
          <el-table
            :data="tableData"
            border
            show-summary
            ref="eleTable"
            :height="tableHeight"
            :header-cell-style="{ background: '#F5F7FA' }"
          >
            <el-table-column prop="area" label="区域" width="160">
            </el-table-column>
            <el-table-column prop="date" label="时间" width="170">
            </el-table-column>
            <el-table-column prop="jDate" label="尖时段">
              <template #default="{ row }">{{ row?.jDate ?? "--" }}</template>
            </el-table-column>
            <el-table-column prop="fDate" label="峰时段"></el-table-column>
            <el-table-column prop="pDate" label="平时段"></el-table-column>
            <el-table-column prop="gDate" label="谷时段"></el-table-column>
            <el-table-column prop="qDate" label="全时段">
              <template #default="{ row }">{{ row?.qDate ?? "--" }}</template>
            </el-table-column>
            <el-table-column prop="all" label="小计"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Electricity",
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  data() {
    return {
      option: {},
      tableData: [],
      filterText: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      chartData: {},
      myChart: null,
      chartTitle: "",
      tableHeight: 0,
    };
  },
  created() {
    this.getTableHeight();
    this.getTableList(1);
  },
  mounted() {
    this.getTreeList();
    this.initChartData(1);
    window.addEventListener("resize", () => {
      this.getTableHeight();
    });
  },
  methods: {
    getTableHeight() {
      this.tableHeight = window.innerHeight - 440;
    },
    initChartData(index) {
      this.$http.get("/api/getChartData").then((res) => {
        if (res.data.code === 200) {
          this.chartData = res.data.data[index];
          if (this.myChart !== null) {
            this.myChart.dispose();
          }
          this.chartTitle = "用电分时段用能";
          this.chartTitle += index === 1 ? "（良信园区）" : "（电源进线）";
          this.initChart();
        }
      });
    },
    initChart() {
      this.myChart = echarts.init(document.getElementById("chart"));
      this.option = {
        title: {
          text: this.chartTitle,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: (params) => {
            let list = [];
            let listItem = "";
            let html = "";
            html += `<span>${params[0].name}<span><br>`;
            for (let i = 0; i < params.length; i++) {
              let value = params[i].value;
              if (value === 0) {
                value = "--";
              }
              html += `<i style="display: inline-block;width: 10px;height: 10px;background:${params[i].color};margin-right: 5px;border-radius: 50%;"></i><span style="width:120px; display:inline-block;">${params[i].seriesName}: ${value}kw·h</span><br>`;
            }
            list.push(html);
            listItem = list.join("<br>");
            return `<div class="showBox">${listItem}</div>`;
          },
        },
        toolbox: {
          feature: {
            saveAsImage: { show: true },
          },
        },
        legend: {
          right: 0,
          top: 23,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "2023-03-01",
              "2023-03-02",
              "2023-03-03",
              "2023-03-04",
              "2023-03-05",
              "2023-03-06",
            ],
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            name: "kw·h",
            type: "value",
            axisLine: {
              show: true,
            },
          },
        ],
        series: [
          {
            name: "尖时段",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            barMaxWidth: "30%",
            data: this.chartData.jData,
          },
          {
            name: "峰时段",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            barMaxWidth: "30%",
            data: this.chartData.fData,
          },
          {
            name: "平时段",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            barMaxWidth: "30%",
            data: this.chartData.pData,
          },
          {
            name: "谷时段",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            barMaxWidth: "30%",
            data: this.chartData.gData,
          },
          {
            name: "全时段",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            barMaxWidth: "30%",
            data: this.chartData.qData,
          },
          {
            name: "总用电",
            type: "line",
            smooth: true,
            data: this.chartData.all,
            lineStyle: {
              type: "dashed",
            },
          },
        ],
      };
      this.myChart.setOption(this.option);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(node) {
      this.getTableList(node.id);
      this.initChartData(node.id);
    },
    getTableList(index) {
      this.$http.get("/api/getTable").then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data[index];
        }
      });
    },
    getTreeList() {
      this.$http.get("/api/getTreeData").then((res) => {
        if (res.data.code === 200) {
          this.treeData = res.data.data;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
.row {
  position: relative;
  box-sizing: border-box;
}
.card {
  margin-bottom: 10px;
}
.box-card {
  height: calc(100vh - 30px);
  min-height: 611px;
}
.content-card {
  &-top {
    height: 300px;
  }
  &-bottom {
    height: calc(100vh - 342px);
    min-height: 300px;
  }
}

#chart {
  height: 280px;
}
.card-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: space-between;

  &-left {
    color: black;
    font-weight: bold;
  }
}
.filter-tree {
  margin-top: 15px;
}
.custom-node {
  &-text {
    color: #807a7a;
    margin-left: 5px;
  }
}
::v-deep .el-tree-node__content {
  height: 40px;
}
::v-deep .el-tree-node.is-current {
  & > .el-tree-node__content {
    color: #21bb9e !important;
    border-left: 3px solid #21bb9e;
    background-color: #d7ebdb;
    & .custom-node-text {
      color: #21bb9e !important;
    }
  }
}
</style>
